import React, {Component} from "react";
import
{
    Card,
    Select,
    Input,
    Button,
    Table,
    Icon
}
    from "antd"
import LinkButton from "../../components/link-button";
import {getProductList, searchProducts} from "../../api"
import {PAGE_SIZE} from "../../utils/constant";

const Option = Select.Option
/*
Product的默认子路由组件
* */
export default class ProductHome extends Component {

    state = {
        products: [],// 商品的数组
        loading: false, // 获取分页的loading
        total: 0, // 商品的总数量
        searchName: '', // 搜索的关键字
        searchType: 'productName', // 根据哪个字段搜索默认是根据名称搜索(不能随便瞎写)

    }

    componentWillMount() {
        this.initColumns()
    }

    componentDidMount() {
        this.getProducts(1)
    }

    // 获取指定页码的商品列表
    getProducts = async (pageNum) => {
        // 发请求之前显示loading
        this.setState({loading: true})
        const {searchName, searchType} = this.state
        let result
        // 如果搜索的关键字有值,说明要做搜索分页
        if (searchName) {
            result = await searchProducts({pageNum, pageSize: PAGE_SIZE, searchName, searchType})
        } else {
            result = await getProductList(pageNum, PAGE_SIZE)
        }
        // 请求拿到数据之后隐藏loading
        this.setState({loading: false})
        // 对请求是否成功做判断
        console.log('@@', result.data)
        if (result.status === 0) {
            // 取出分页数据,更新状态，显示分页列表
            const {total, list} = result.data
            // 更新状态
            this.setState({total, products: list})


        }
    }


    // 初始化表格的列选项
    initColumns = () => {
        this.columns = [
            {
                title: '商品名称',
                dataIndex: 'name',

            },
            {
                title: '商品描述',
                dataIndex: 'desc',

            },
            {
                title: '价格',
                dataIndex: 'price',
                // 当前指定了对应的属性,传入的是对应的属性值
                render: (price) => '¥' + price
            },
            {
                title: '状态',
                dataIndex: 'status',
                // 当前指定了对应的属性,传入的是对应的属性值
                render: (status) => {
                    return (
                        <span>
                            <Button type="primary">下架</Button>
                            <span>在售</span>
                        </span>
                    )
                }
            },
            {
                title: '操作',

                render: (product) => {
                    return (
                        <span>
                            {/*将product对象使用state传递给目标路由组件*/}
                            <LinkButton
                                onClick={() => this.props.history.push('/product/detail',
                                    // 如果传的是{product}这里是传的属性,因为product是一个对象相当于{{product:product}}
                                    {product})}
                            >详情</LinkButton>
                             <LinkButton>修改</LinkButton>
                        </span>
                    )
                }
            }


        ];
    }

    render() {

        const {products, loading, total, searchName, searchType} = this.state

        const title = (
            <span>
                {/*onChange是为了收集表单数据类似于vue的双向绑定,即react的受控组件*/}
                <Select value={searchType} style={{width: 150}}
                        onChange={value => this.setState({searchType: value})}>
                    <Option value='productName'>按名称搜索</Option>
                    <Option value='productDesc'>按描述搜索</Option>
                </Select>
                <Input style={{width: 150, margin: '0 15px'}}
                       placeholder='关键字'
                       onChange={event => this.setState({searchName: event.target.value})}

                />
                <Button type="primary" onClick={() => this.getProducts(1)}>搜索</Button>
            </span>
        )
        const extra = (
            <Button type='primary'>
                <Icon type='plus'/>
                添加
            </Button>
        )


        return (
            <Card title={title} extra={extra}>
                <Table
                    loading={loading}
                    bordered
                    dataSource={products}
                    rowKey="_id"
                    columns={this.columns}
                    // 分页的配置是一个对象
                    pagination={{
                        defaultPageSize: PAGE_SIZE, // 默认的每页条数
                        showQuickJumper: true, // 是否可以快速跳转到某页
                        total: total,
                        // 点击页码的回调
                        onChange: this.getProducts


                    }}

                />


            </Card>
        )
    }
}
